import { memo, useEffect, useState } from "react";
import styles from "./list.module.scss";
import { list } from "../../../Api";
import { useNavigate } from "react-router-dom";
interface lists {
  id: number;
  image: string;
  name: string;
}
const List: React.FC = () => {
  let to = useNavigate();
  let [lists, setLists] = useState<lists[]>([]);
  let data = async () => {
    let { data } = await list();
    lists = data.data.category_list[3].tag_list;
    setLists([...lists]);
    // console.log(data);
  };
  useEffect(() => {
    data();
  }, []);

  return (
    <>
      <div className={styles.box}>
        {lists.map((item) => (
          <div key={item.id} onClick={() => to(`/typebooklist/${item.id}/${item.name}`)}>
            <img src={item.image} alt="" />
            <span>{item.name}</span>
          </div>
        ))}
        <button onClick={() => to("/alltype")}>全部分类 &gt;</button>
      </div>
    </>
  );
};
export default memo(List);
